<template>
	<view class="order-detail-container">
		<uv-gap height="5" bgColor="transparent" />
		<!-- 进度条 -->
		<view class="progress-section">
			<uv-steps :current="info.service_status-1" dot active-color="#4bc3a7">
				<uv-steps-item title="下单预约"></uv-steps-item>
				<uv-steps-item title="安排人员"></uv-steps-item>
				<uv-steps-item title="上门服务"></uv-steps-item>
				<uv-steps-item title="服务完成"></uv-steps-item>
			</uv-steps>
			<view class="comment-info">
				<uv-text text="您对师傅满意吗" bold size="28upx"></uv-text>
				<uv-checkbox-group v-model="tec_is_anonymous" activeColor="#D32D26" inactiveColor="#D32D26" customStyle="display: flex; justify-content: flex-end;">
					<uv-checkbox name="1" label="匿名提交" shape="circle" customStyle="padding:10px 0">
					</uv-checkbox>
				</uv-checkbox-group>
			</view>
			<!-- 服务人员信息 -->
			<view class="staff-info" v-if="info.technician.name" @click="showTecInfo">
				<view class="icon">
					<uv-avatar :src="info.technician.avatar || getIconPath('avatar.png')" size="50"
						customStyle="margin-right:10px" />
				</view>
				<view class="lbl-info">
					<view class="staff-name">{{info.technician.name}} <uv-icon name="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a9667202508161143239933.png"
							size="16" v-if="info.technician_id>0 && info.takes_order_status>0"></uv-icon></view>
					<view class="staff-desc">{{info.technician.describe}}</view>
				</view>
			</view>
			<lst-upimg :type="4" :multiple="true" :maxCount="5" @success="e => uptecSuccess(e)">
				<view class="addImg">
					<uv-icon name="photo" color="#E7E7E7" size="60" />
					<text>添加图片</text>
				</view>
			</lst-upimg>
			<uv-gap height="10" bgColor="transparent" />
			<uv-textarea v-model="technician.content" placeholder="写下你的评价" :maxlength="255" />
		</view>
		<view class="order-section">
			<view class="comment-info">
				<uv-text text="您对服务满意吗" bold size="28upx"></uv-text>
				<uv-checkbox-group v-model="pro_is_anonymous" activeColor="#D32D26" inactiveColor="#D32D26" customStyle="display: flex; justify-content: flex-end;">
					<uv-checkbox name="1" label="匿名提交" shape="circle" customStyle="padding:10px 0;">
					</uv-checkbox>
				</uv-checkbox-group>
			</view>
			<view class="flex padding2">
				<image :src="info.product_image" class="thumb" />
				<view class="flex-1 flex align-start justify-between">
					<view>
						<uv-text :text="info.product_name" color="#333" size="15" />
						<uv-text :text="info.spec_values" :custom-style="{background:'#f2f2f2',padding:'5px'}" color="#333" size="11" v-if="info.spec_values"/>
					</view>
					
					<view class="jiage">
						<view class="t1">￥{{info.product_price}}</view>
						<view class="t2">x{{info.num}}</view>
					</view>
				</view>
			</view>
			<lst-upimg :type="4" :multiple="true" :maxCount="5" @success="e => upproSuccess(e)">
				<view class="addImg">
					<uv-icon name="photo" color="#E7E7E7" size="60" />
					<text>添加图片</text>
				</view>
			</lst-upimg>
			<uv-gap height="10" bgColor="transparent" />
			<uv-textarea v-model="product.content" placeholder="写下你的评价" :maxlength="255" />
		</view>


		<!-- 底部按钮 -->
		<view class="footer-btn">
			<view class="btn-div">
				<button type="button" class="btn_sure" @click="doSubmit">提交评价</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref, reactive
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getServiceInfo, serviceComment
	} from '@/api'
	import { useRefreshStore } from '@/store'
	const refreshStore = useRefreshStore()
	const info = ref({})
	const tec_is_anonymous = ref([])
	const pro_is_anonymous = ref([])
	const technician = reactive({
		id: 0,
		content:'',
		images: [],
		is_anonymous: 0
	})
	const product = reactive({
		id: 0,
		content:'',
		images: [],
		is_anonymous: 0
	})
	const uptecSuccess = (fileList) => {
		technician.images = fileList
	}
	const upproSuccess = (fileList) => {
		product.images = fileList
	}
	const doSubmit = async () => {
		if(!technician.content) return uni.$uv.toast('请输入对技工的评价');
		if(!product.content) return uni.$uv.toast('请输入对服务的评价');
		technician.id = info.value.technician.id
		technician.images = technician.images.map(({src}) => src)
		technician.is_anonymous = tec_is_anonymous.value.length > 0 ? 1 : 0
		product.id = info.value.product_id
		product.images = product.images.map(({src}) => src)
		product.is_anonymous = pro_is_anonymous.value.length > 0 ? 1 : 0
		let params = {
			order_id: info.value.id,
			technician: technician,
			product: product
		}
		let res = await serviceComment(params)
		if (res.code == 200) {
			refreshStore.setRefresh(true)
			uni.showToast({
				title: '评价成功',
				icon: 'success',
			})	
			uni.navigateBack()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'error'	
			})
		} 
	}
	onLoad(async (option) => {
		if (option.id) {
			info.value = (await getServiceInfo({
				order_id: option.id
			})).result
		}
	})
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background-color: #f7f7f7 !important;
		min-height: 100vh;
		padding-bottom: 80px;
		width: 100%;

		.progress-section {
			background-color: #fff;
			padding: 20px 15px;
			margin: 10px;
			border-radius: 8px;
		}
		
		.comment-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;
		}

		.staff-info {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.icon {
				margin: 15px 10px;
			}

			.staff-name {
				font-size: 16px;
				font-weight: 600;
				margin-right: 8px;
				display: flex;
				align-items: center;
			}
			
			.staff-desc {
				color: #979797;
				font-size: 14px;
				display: inline-block;
			}
			
			.lbl-info {
				display: flex;
				flex-direction: column;
			}
		}

		.order-section {
			background-color: #fff;
			padding: 20px 15px;
			margin: 10px;
			border-radius: 8px;
		}
		.padding2 {
			padding: 0 20upx;
			margin-bottom: 20upx;
			margin-top: 20upx;
		}
		.margin20 {
			margin-right: 20upx;
		}
		
		.thumb {
			width: 80px;
			height: 80px;
			border-radius: 3px;
			margin-right: 20upx;
		}
		
		.t1 {
			color: #333;
			font-size: 30upx;
		}
		.t2 {
			color: #979797;
			font-size: 24upx;
			text-align: right;
		}
		
		.jiage {
			margin-left: 20upx;
		}

		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0;

			.lbl_info {
				width: 80px;
				font-size: 24upx;
			}

			.content_info {
				flex: 1;
				text-align: right;
				font-size: 24upx;
			}

			.lbl_pay {
				width: 80px;
				color: #979797;
				font-size: 24upx;
			}

			.pay_info {
				flex: 1;
				text-align: left;
				font-size: 24upx;
			}
		}

		.orderNo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
		}

		.orderNo .lbl_pay {
			color: #979797;
		}

		.orderNo .uv-icon {
			margin-left: 10px;
		}

		.orderNo .uv-button {
			margin-left: 10px;
		}

		.total-price {
			color: #f56c6c;
			font-weight: bold;
		}
		
		.addImg {
			display: flex;
			width: 200upx;
			height: 200upx;
			border-radius: 20upx;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #F0F0F0;
		
			text {
				color: #C8C8C8;
				font-size: 28upx;
			}
		}

		.footer-btn {
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10px 15px;
			.btn-div {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn_sure {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				height: 80upx;
				line-height: 80upx;
				border-radius: 40upx;
				background-color: #DE3F27;
				color: #fff;
				font-size: 28upx;
			}
		}
	}
</style>